import { autorun, makeAutoObservable } from 'mobx'
import { BaseItemType } from '../../types/pageDesign'

class PageDesignModel {
  pageData: BaseItemType[] = []
  currentItem?: BaseItemType

  addPageItem(item: BaseItemType) {
    item.id = Date.now()
    this.pageData.push(item)
  }

  setCurrentItem<T extends BaseItemType>(item: T) {
    this.currentItem = item
    // 更新页面数据
    let index = this.pageData.findIndex((value) => value.id === item.id)
    this.pageData.splice(index, 1, item)
  }

  save() {
    console.log(JSON.stringify(this.pageData))
  }

  constructor() {
    makeAutoObservable(this, {}, { autoBind: true })
    autorun(() => {
      this.save()
    })
  }
}

export default PageDesignModel
export const pageDesignModel = new PageDesignModel()
